<!--
import { longStackSupport } from 'q';
 * @Author: wangding
 * @Date: 2020-10-30 18:33:10
 * @LastEditTime: 2020-12-30 20:19:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\pushNews\index.vue
-->
<template>
    <div class="pushNews-main-box">
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('pushNews.title')}}</span>
                <el-input style="width:160px;" v-model="querylist.title" :placeholder="$t('common.info.pl-insert-content')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('opttask.status')}}</span>
                <el-select v-model="querylist.isPush" filterable :placeholder="$t('index.selectStates')" :clearable='true'>
                    <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.code"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('pushnews.publishTime')}}</span>
                <el-date-picker
                v-model="querylist.startTime"
                type="date"
                :placeholder="$t('index.startTime')"
                format="yyyy-MM-dd"
                value-format='yyyy-MM-dd'
                :picker-options="pickerOptionsStatus"
                >
                </el-date-picker>
                -
                <el-date-picker
                v-model="querylist.endTime"
                type="date"
                :placeholder="$t('index.endTime')"
                format="yyyy-MM-dd"
                value-format='yyyy-MM-dd'
                :picker-options="pickerOptionsEnd"
                >
                </el-date-picker>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
        </div>
        <div class="button-box">
            <el-button type="primary" icon='el-icon-edit' class="marginR10" @click="()=>{$store.commit('setNewVisible',true)}">{{$t('add')}}</el-button>
            <el-popconfirm
                    :confirm-button-text='$t("sure")'
                    :cancel-button-text='$t("cancel")'
                    :title="$t('promotionManagement.allDelete')"
                @confirm='pushnewsDeleteNewsBatch()'
            >
                <el-button type="" slot="reference" icon='el-icon-delete' >{{$t('delete')}}</el-button>
            </el-popconfirm>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column' :select='true'>
            <template #isPush="{data}">
                <a href="javascript:;" @click='isPushChange(data)' class="hover-color">{{returnStatus(data.isPush)}}</a>
            </template>
            <template #contents="{data}">
                <div class="hidden-text" :title='data.contents'>
                    {{data.contents}}
                </div>
            </template>
            <template #option="{data}">
                <div class="option-box">
                    <el-button size='small' type="primary" icon="el-icon-edit"  @click='editStyle(data)' class="marginR10"></el-button>
                    <el-popconfirm
                            :confirm-button-text='$t("sure")'
                            :cancel-button-text='$t("cancel")'
                            :title="$t('index.delete_item_confirm')"
                        @confirm='pushnewsDeleteNews(data.sid)'
                    >
                        <el-button class="marginR10" type="" slot="reference" icon='el-icon-delete' ></el-button>
                    </el-popconfirm>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="querylist.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="querylist.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <add @uploadData='query' v-if='newVisible'></add>
        <edit @uploadData='query' :editRows='editRows'></edit>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
import add from './add.vue'
import edit from './edit.vue'
export default {
    components: {
        baseTable,
        add,
        edit
    },
    props: {

    },
    data() {
        return {
            querylist:{
                title:'',
                isPush:'',
                startTime:'',
                endTime:"",
                size:10,
                current:1
            },
            statusList:[],
            total:1,
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('pushNews.title'),
                value: 'title',
            },
            {
                title: this.$t('pushNews.contents'),
                value: 'contents',
                slot: 'contents',
                width:'300'
            },
            {
                title: this.$t('pushNews.isPush'),
                value: 'isPush',
                slot: 'isPush'
            },{
                title: this.$t('pushnews.publishTime'),
                value: 'publishTime',
                slot: 'publishTime'
            },{
                title: this.$t('control'),
                value: 'sid',
                slot: 'option'
            }],
            selectDataList:[],
            editRows:{}
        };
    },
    computed: {
        newVisible(){
            return this.$store.state.sysStore.newVisible
        },
        pickerOptionsStatus(){ //禁用今天之后的时间
        let that = this
            return {
                disabledDate(time) {
                    return time.getTime() > new Date(that.querylist.endTime).getTime() || time.getTime() > Date.now() 
                },
            }
        },
        pickerOptionsEnd(){ //禁用今天之后的时间
            let that = this
            return {
                disabledDate(time) {
                    return time.getTime() < new Date(that.querylist.startTime).getTime()-86400000 || time.getTime() > Date.now() 
                },
            }
        },
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch()
        this.pushnewsGetPage()
    },
    methods: {
        editStyle(data){
            this.editRows = data
            this.$store.commit('setNewVisibleEdit',true)
        },
        async pushnewsDeleteNewsBatch(){
            if(this.selectDataList.length == 0){
                this.comm.showMsg(false,this.$t('index.delete_select'))
                return
            }
            let res = await this.API.pushnewsDeleteNewsBatch({
                ids:this.selectDataList.map(item=>{return item.sid})
            })
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.query()
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        },
        async pushnewsDeleteNews(id){
            let res = await this.API.pushnewsDeleteNewsBatch({
                ids:id
            })
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.query()
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        },
        async pushnewsGetPage(){
            this.loading = true
            let res = await this.API.pushnewsGetPage(this.querylist)
            this.dataRows = res.rows
            this.total = res.total
            this.loading = false
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'PUSH_TYPE',
                lang:localStorage.getItem('lan') || 'zh_CN'
            })
            this.statusList = res.PUSH_TYPE || []
        },
        query(){
            this.querylist.current = 1
            this.pushnewsGetPage()
        },
        handleSelectionChange(data){
            this.selectDataList = data
        },
        returnStatus(val){
            let code = ''
            this.statusList.forEach(item =>{
                if(item.value == val){
                    code = item.code
                }
            })
            return code
        },
        async isPushChange(data){
            let value = data.isPush == 1? 0:1
            let res = await this.API.pushnewsEditNews({
                id:data.sid,
                isPush:value,
                onlyEdisIsPush:1
            })
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.query()
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        },
        handleSizeChange(val) {
          this.querylist.size = val
          this.querylist.current = 1
          this.pushnewsGetPage()
        },
        handleCurrentChange(val) {
          this.querylist.current = val
          this.pushnewsGetPage()
        },
        handleSelectionChange(data){
            this.selectDataList = data
        }
    },
};
</script>

<style  lang="less" scoped>
.pushNews-main-box{
    .hidden-text{
        overflow: hidden; 
        white-space: nowrap; 
        text-overflow: ellipsis;
    }
    .hover-color{
        color:#3c8dbc;
    }
    .hover-color:hover{
        color: #ED7523;
    }
}
</style>
